<template>
    <div>
        <SearchWrap
            ref="searchRef"
            @search="handleSearch"
        ></SearchWrap>
        <!-- <el-button class="mar-b20" type="primary" @click="handleRow('add', {})">+新增</el-button> -->
        <TableWrap
            :hide-header="true"
            :total="pageInfo.total"
            :loading="data.loading"
            :table-data="data.tableData"
            v-model:page-size="pageInfo.pageSize"
            v-model:page-index="pageInfo.pageIndex"
            @request-list="getList">
                <el-table-column prop="userName" label="姓名"/>
                <el-table-column prop="mobile" label="手机号"/>
                <el-table-column prop="mobile" label="学段/学科"/>
                <el-table-column prop="userName" label="职位类型"/>
                <el-table-column prop="mobile" label="所在单位"/>
                <el-table-column prop="mobile" label="角色"/>
                <el-table-column prop="userName" label="创建时间"/>
                <el-table-column prop="mobile" label="发布位置"/>
                <el-table-column prop="mobile" label="发布状态"/>
                <el-table-column prop="mobile" label="置顶状态"/>
                <el-table-column label="操作" width="250" fixed="right">
                    <template #default="scope">
                        <!-- <el-button type="primary" link @click="handleRow('edit', scope.row)">编辑</el-button> -->
                        <el-button type="primary" link @click="handleRow('release', scope.row)">{{ true? '取消发布' : '发布' }}</el-button>
                        <el-button type="primary" link @click="handleRow('topping', scope.row)">{{ true ? '取消置顶' : '置顶' }}</el-button>
                        <el-button type="primary" link @click="handleRow('preview', scope.row)">预览</el-button>
                        <el-button type="primary" link @click="handleRow('delete', scope.row)">删除</el-button>
                    </template>
                </el-table-column>
        </TableWrap>
        <ConfirmDialog
            :layer="confirmOption"
            v-model:visible="confirmOption.show">
            <p>确认要删除这个研修之星吗？</p>
        </ConfirmDialog>
        <PreviewDialog
            v-model:model-value="previewOption.visible">
        </PreviewDialog>
    </div>
</template>

<script setup>
import SearchWrap from './search.vue';
import TableWrap from '@/components/table-wrap/table-wrap.vue';
import ConfirmDialog from '@/components/dialogComp.vue';
import PreviewDialog from './preview.vue';
import { ref, reactive, onMounted, defineProps, watch } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const props = defineProps({
    currentTab: { // 当前tab
        type: String,
        default: 'banner'
    }
});

// 列表数据
let data = reactive({
    loading: false,
    tableData: [],
    currentNode: {}
});

// 分页数据
let pageInfo = reactive({
    total: 0,
    pageSize: 10,
    pageIndex: 1
})

// 筛选组件
let searchRef = ref(null);

// 二次确认弹窗数据
let confirmOption = reactive({
    show: false,
    title: '确认删除',
    showButton: true,
    isCenter: false
});

// 预览弹窗数据
let previewOption = reactive({
    visible: false
});

// 获取列表数据
function getList () {
    // let filterInfo = searchRef.value.getFilterInfo();
    // data.loading = true;
    console.log(searchRef.value);
    // store.dispatch('proxyAction', {
    //     name: 'getList',
    //     queries: {
    //         pageSize: pageInfo.pageSize,
    //         pageIndex: pageInfo.pageIndex,
    //         ...filterInfo
    //     }
    // }).then((res) => {
    //     data.tableData = res.data.rows || [];
    //     pageInfo.total = res.data.total;
    // }).finally(() => {
    //     data.loading = false;
    // })
}

// 搜索
function handleSearch () {
    resetPane();
}

// 处理列表数据
function handleRow (type, info) {
    console.log(info);
    data.currentNode = info;
    switch(type) {
        case 'add':
            break
        case 'edit':
            break
        case 'release':
            break
        case 'topping':
            break
        case 'preview':
            previewOption.visible = true;
            break
        case 'delete':
            // confirmOption.show = true;
            break

    }
}

// 重置列表
function resetPane () {
    if (props.currentTab === 'star') {
        pageInfo.pageIndex = 1;
        getList();
    }
}

// 初始化数据
onMounted(() => {
    resetPane();
})

// 监听外部tab改变，重置数据
watch(() => props.currentTab, () => {
    resetPane();
})


</script>

<style lang="scss" scoped>
.mar-b20 {
    margin-bottom: 20px;
}
</style>